<template>
  <el-dialog
    v-model="visible"
    :title="props.id ? '修改Bing申请开户' : 'Bing申请开户'"
    width="60%"
    :show-close="false"
    :close-on-click-modal="false"
  >
    <div class="bing-apply-container">
      <ApplyStepView />
      <!-- 表单内容 -->
      <div class="form-container">
        <el-form
          ref="formRef"
          :model="formData"
          :rules="formRules"
          label-width="120px"
          class="apply-form"
        >
          <el-form-item
            label="公司名称"
            prop="enterpriseName"
            class="form-item"
          >
            <el-input
              v-model="formData.enterpriseName"
              placeholder="请输入公司名称"
            />
          </el-form-item>
          <el-form-item
            label="公司地址"
            prop="enterpriseAddress"
            class="form-item"
          >
            <el-input
              v-model="formData.enterpriseAddress"
              placeholder="请输入公司地址"
            />
          </el-form-item>
          <el-form-item label="电话号码" prop="telephone" class="form-item">
            <el-input
              v-model="formData.telephone"
              maxlength="11"
              placeholder="请输入电话号码"
            />
          </el-form-item>
          <el-form-item
            label="账户时区"
            prop="accountTimeZone"
            class="form-item"
          >
            <el-input
              v-model="formData.accountTimeZone"
              placeholder="请输入账户时区"
            />
            <!-- <el-select
              v-model="formData.accountTimeZone"
              placeholder="请选择时区"
            >
              <el-option
                v-for="option in timezoneOptions"
                :key="option.value"
                :label="option.label"
                :value="option.value"
              />
            </el-select> -->
          </el-form-item>

          <el-form-item label="推广链接" prop="promotionLink" class="form-item">
            <div style="width: 100%">
              <div>
                <el-input
                  v-model="formData.promotionLink"
                  placeholder="请输入推广链接"
                />
              </div>
              <div class="form-tip">
                请确认推广链接是可打开而且是可正常跳转的状态。链接示例:
                https://www.hsou.cn
                <div>a. 确保网站Privacy Policy符合Bing要求</div>
                <div>b. 网站内容合规,无违规性内容</div>
              </div>
            </div>
          </el-form-item>

          <el-form-item label="授权邮箱" prop="email" class="form-item">
            <el-input
              v-model="formData.email"
              placeholder="请输入授权邮箱"
              type="email"
            />
          </el-form-item>

          <el-form-item
            label="账户名称/ID"
            prop="accountName"
            class="form-item"
          >
            <el-input
              v-model="formData.accountName"
              placeholder="请输入账户名称/ID"
            />
          </el-form-item>

          <!-- <el-form-item label="结算货币" prop="currencyType">
            <el-radio-group v-model="formData.currencyType" class="form-item">
              <el-radio-group v-model="formData.currencyType">
                <el-radio
                  v-for="dict in bus_currency_type"
                  :key="dict.value"
                  :value="dict.value"
                  >{{ dict.label }}</el-radio
                >
              </el-radio-group>
            </el-radio-group>
          </el-form-item> -->

          <el-form-item label="预存金额" prop="prestorePrice" class="form-item">
            <el-input-number
              v-model="formData.prestorePrice"
              placeholder="请输入预存金额"
            />
            <!-- <el-input
              v-model="formData.prestorePrice"
              placeholder="请输入预存金额"
              type="number"
            />
            <template #append>
              {{ selectDictLabels(bus_currency_type, getCoinType()) }}
            </template> -->
          </el-form-item>
          <el-form-item
            label="营业执照附件"
            prop="businessLicenseUrl"
            class="form-item"
          >
            <ImageUpload v-model="formData.businessLicenseUrl" :limit="1" />
          </el-form-item>
          <el-form-item label="联系人" prop="contactName" class="form-item">
            <el-input
              v-model="formData.contactName"
              placeholder="请输入联系人"
            />
          </el-form-item>
          <el-form-item
            label="联系人电话"
            prop="contactPeople"
            class="form-item"
          >
            <el-input
              v-model="formData.contactPeople"
              placeholder="请输入联系人电话"
              maxlength="11"
            />
          </el-form-item>
        </el-form>
      </div>
      <!-- 操作按钮 -->
      <div class="form-actions">
        <el-button size="large" @click="handleCancel"> 取消 </el-button>
        <el-button type="primary" size="large" @click="handleSubmit">
          {{ formData.id ? "修改" : "提交开始申请" }}
        </el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script setup>
import { computed, reactive } from "vue";
import ApplyStepView from "../apply-step.vue";
import { handleApply } from "@/utils/accountApply";
import { applyPlatform } from "@/const/index.ts";
import { getCoinType } from "@/utils//auth.js";
import { getApplyAccountDetail, editApplyAccount } from "@/api/apply/index.js";

const detailInfo = ref({});
const { proxy } = getCurrentInstance();
const { bus_currency_type } = proxy.useDict("bus_currency_type");

const props = defineProps({
  value: {
    type: Boolean,
    default: false,
  },
  id: {
    type: String,
    default: "",
  },
});

const emits = defineEmits(["update:value", "on-success"]);

const visible = computed({
  get() {
    return props.value;
  },
  set(val) {
    emits("update:value", val);
  },
});

// 表单数据
const formData = reactive({
  id: "",
  systemType: applyPlatform.BING,
  enterpriseAddress: "",
  telephone: "",
  accountTimeZone: "",
  accountName: "",
  prestorePrice: "",
  enterpriseName: "",
  promotionLink: "",
  email: "",
  currencyType: "",
  businessLicenseUrl: "",
  contactName: "",
  contactPeople: "",
});

// 时区选项
const timezoneOptions = [
  { label: "Asia/Shanghai (UTC+8)", value: "Asia/Shanghai" },
  { label: "Asia/Tokyo (UTC+9)", value: "Asia/Tokyo" },
  { label: "America/New_York (UTC-5)", value: "America/New_York" },
  { label: "Europe/London (UTC+0)", value: "Europe/London" },
];

const formRules = {
  enterpriseName: [
    { required: true, message: "请输入公司名称", trigger: "blur" },
    {
      min: 2,
      max: 100,
      message: "公司名称长度在 2 到 100 个字符",
      trigger: "blur",
    },
  ],
  enterpriseAddress: [
    { required: true, message: "请输入公司地址", trigger: "blur" },
    {
      min: 10,
      max: 200,
      message: "公司地址长度在 10 到 200 个字符",
      trigger: "blur",
    },
  ],
  telephone: [
    { required: true, message: "请输入电话", trigger: "blur" },
    {
      pattern: /^1[3-9]\d{9}$/,
      message: "请输入正确的手机号码格式",
      trigger: "blur",
    },
  ],
  // accountTimeZone: [
  //   { required: true, message: "请选择时区", trigger: "change" },
  // ],
  promotionLink: [
    { required: true, message: "请输入网站域名", trigger: "blur" },
    {
      pattern: /^https?:\/\/.+/,
      message: "请输入正确的网址格式",
      trigger: "blur",
    },
  ],

  email: [
    { required: true, message: "请输入Outlook邮箱", trigger: "blur" },
    { type: "email", message: "请输入正确的邮箱格式", trigger: "blur" },
    {
      pattern: /@outlook\.com$|@hotmail\.com$|@live\.com$/i,
      message: "请输入Outlook邮箱地址",
      trigger: "blur",
    },
  ],

  // currencyType: [
  //   { required: true, message: "请选择结算货币", trigger: "change" },
  // ],
  prestorePrice: [
    { required: true, message: "请输入预存金额", trigger: "blur" },
    {
      pattern: /^\d+(\.\d{1,2})?$/,
      message: "请输入正确的金额格式",
      trigger: "blur",
    },
  ],
  accountName: [
    { required: true, message: "请输入账户名称", trigger: "blur" },
    {
      min: 2,
      max: 50,
      message: "账户名称长度在 2 到 50 个字符",
      trigger: "blur",
    },
  ],

  businessLicenseUrl: [
    { required: true, message: "请上传营业执照附件", trigger: "change" },
  ],
  contactName: [{ required: true, message: "请输入联系人", trigger: "blur" }],
  contactPeople: [
    { required: true, message: "请输入联系联系电话", trigger: "blur" },
  ],
};

// 表单引用
const formRef = ref();

// 提交表单
function handleSubmit() {
  if (!formRef.value) return;

  formRef.value.validate(async (valid) => {
    try {
      if (valid) {
        formData.mediaBing = {
          // enterpriseAddress: formData.enterpriseAddress, //开户公司地址
          telephone: formData.telephone, //电话号码
          accountTimeZone: formData.accountTimeZone, //账户时区
          accountName: formData.accountName, //账户名称/ID
          prestorePrice: formData.prestorePrice, //预存金额
        };
        if (formData.id) {
          formData.mediaBing.id = detailInfo.value.mediaBing.id;
          formData.mediaBing.mediaId = detailInfo.value.mediaBing.mediaId;
          await editApplyAccount(formData);
          emits("on-success");
          proxy.$modal.msgSuccess("修改成功");
        } else {
          await handleApply(formData);
          proxy.$modal.msgSuccess("申请成功");
        }
        visible.value = false;
      } else {
        proxy.$modal.msgError("请检查表单填写是否正确");
      }
    } catch (error) {}
  });
}

// 取消
function handleCancel() {
  visible.value = false;
  // 重置表单数据
  Object.assign(formData, {
    enterpriseAddress: "",
    telephone: "",
    accountTimeZone: "",
    accountName: "",
    prestorePrice: "",
    enterpriseName: "",
    promotionLink: "",
    email: "",
    currencyType: "",
    businessLicenseUrl: "",
    contactName: "",
    contactPeople: "",
    mediaBing: {},
  });
  formRef.value?.resetFields();
}

function getDetail() {
  getApplyAccountDetail(props.id).then(({ data }) => {
    detailInfo.value = data;
    Object.assign(formData, {
      ...data,
      ...data.mediaBing,
    });
  });
}

watch(
  () => visible.value,
  (val) => {
    if (val && props.id) {
      getDetail();
    }
  },
  {
    deep: true,
    immediate: true,
  }
);
</script>

<style scoped lang="scss">
.bing-apply-container {
  // border: #dcdfe6 solid 1px;
  background-color: #fff;
  border-radius: 10px;
  // margin: 20px;
  // padding: 20px;
  .section-title {
    font-size: 14px;
    font-weight: 600;
    color: #303133;
    margin-bottom: 24px;
  }
  .form-tip {
    color: #999;
    font-size: 12px;
  }
  .form-item {
    width: 40%;
  }
}
// 表单项样式调整
:deep(.el-form-item__label) {
  font-weight: 500;
  color: #606266;
  font-size: 14px;
}
.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 16px;
  margin-top: 40px;
  padding-top: 24px;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>
